<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header-container">
              <span>欢迎</span>
                <div class="header-title">
                    慧修宝-物业报修管理系统
                </div>
                <div class="header-actions">
                    <el-link type="info" @click="logout">退出登录</el-link>
                </div>
            </el-header>
            <el-container>
                <el-aside>
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="2" text-color="#fff" @select="toPage">
                        <el-menu-item index="/repair">
                            <el-icon>
                                <House />
                            </el-icon>
                            <span>维修任务</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script setup>
import router from '@/router';
import { ElMessage } from 'element-plus';
import { RouterView } from 'vue-router';
import { useTokenStore } from '@/stores/token';
const tokenStore = useTokenStore();
function toPage(indexPath) {
    //编程式导航
    router.push(indexPath)
}
function logout() {
    ElMessage({
        message: '退出成功',
        type: 'success',
        duration: 500,
        onClose: () => {
            tokenStore.$reset()
            // 跳转
            router.push('/chooseLogin');
        }
    });
}
// function getLoginInfo(){
//   adminApi.getLoginInfo()
//     .then(resp =>{
//       console.log(resp.data);
//       username.value = resp.data.username;
//     });
// }
// getLoginInfo();
</script>

<style scoped>
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #404141;
    padding: 0 20px;
}

.header-title {
    font-size: 25px;
    font-weight: bold;
    margin-left: 50px;
}

.header-actions {
    display: flex;
    align-items: center;
}

.header-actions .el-link {
    margin-left: 10px;
}
</style>